<template>
	<div class="container f-row">
		<!-- 左 -->
		<div class="sort-left">
			<p :class="{activeList : isActiveList == item.cat_id}" @click="changeSort(item.cat_id)" v-for="item in sortList" :key="item.cat_id" v-cloak >{{item.cat_name}}</p>
		</div>
		<!-- 右 -->
		<div class="sort-content">
			<div class="sort-logo">
				<img :src="productSort.title_img"/>
			</div>
			<!-- 分类的标题 -->
			<div class="sort-title" v-cloak>• {{productSort.title}}分类 •</div>.
			<!-- 具体分类 -->
			<div class="sort-list">
				<div @click="toGoodsClassify(isActiveList)" class="sort-item" v-for="item in productSort.data" :key="item.id">
					<img :src="item.product_img"/>
					<p>{{item.product_content}}</p>
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default{
		data(){
			return {
				sortSrc : require('../assets/img/sort1.png'),
				
				sortList : [],
				
				isActiveList : '0045',
				
				productSort : {},
				
				all : {},
			}
		},
		methods : {
			changeSort(catId){
					this.isActiveList =catId;
					
					//在大的分类 all 中拿当前点击的分类 
					this.all.data.forEach((item)=>{
						if(item.cat_id == catId){
							this.productSort = item;
							return;
						};
					});
			},
			//跳到具体分类去
			toGoodsClassify(val){
				this.$router.push({path : 'goods-classify', query : {cat_id : val}});
			}
		},
		created() {
		//请求左边分类数据
			this.axios.get('/api_cat').then((result)=>{
				let {data} = result;
				if(data.code != 0){
					console.log(data);
					return;
				};
				this.sortList = data.data;
			});
			
			//请求右所有分类和详细分类
			this.axios.get('/api_classify').then((result)=>{
				let {data} = result;
				if(data.code != 0){
					console.log(data);
					return;
				};
				this.all = data;	
				//调用数据改造方法,用于一刷新显示第一个分类
				this.changeSort('0045');
				
			});
		},
	}
</script>

<style scoped lang="less">
	.sort-left{
		width:26%;
		height:100%;
		overflow-y: scroll;
		background-color: #DADADA;
		padding-bottom: 30px;
		box-sizing: border-box;
		p{
			text-align: center;
			padding: 18px 0px;
			margin-bottom: 6px;
		}
		.activeList{background-color: #eee;}
	}
	.sort-content{
		width:74%;
		height:100%;
		background-color: #EEEEEE;
		
		.sort-logo{
			padding :  14px;
			 
			img{
				width:100%;
			}
		}
	
		.sort-title{
			font-size:14px;
			text-align: center;
			margin-top: 23px;
			color:#666;
		}
		.sort-list{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
			.sort-item{
				width:31%;
				text-align: center;
				
				margin-bottom: 20px;
				img{
					width:85%;
				}
				p{
					font-size: 14px;
					padding: 8px 0px;
				}
			}
		}
	}
</style>
